<template>
	<view class="userinfo">
		<view class="top-bg"></view>
		<view class="pl-3 pr-3 userinfo-wrap">
			<view class="mb-2 cell-wrap">
				<u-cell-group>
					<u-cell @click="handleImgChoose" icon="/static/my/icon_avatar.jpg" title="修改头像" isLink>
						<u--image slot="value" :src="'http://img.help10000.com' + userInfo.Logo" width="80rpx"
							height="80rpx" shape="circle"></u--image>
					</u-cell>
					<u-cell icon="/static/my/go_next.png" title="修改昵称" isLink url="/pages/my/userInfo/changeDispName">
					</u-cell>
					<u-cell icon="/static/my/go_next.png" title="修改密码" isLink url="/pages/my/userInfo/changePassword"
						:border="false"></u-cell>
				</u-cell-group>
			</view>
			<view class="mb-2 cell-wrap">
				<u-cell-group>
					<u-cell @click="showLogout = true" icon="/static/my/tc.png" isLink title="注销账号" :border="false"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<gmy-img-cropper ref="gmyImgCropper" cropperType="ratio" fileType="jpg" @getImg="getImg">
		</gmy-img-cropper>

	</view>
</template>

<script>
	import {
		changeLogo,
		fetchUserInfo
	} from "@/apis/user.js";
	
	import {
		uploadFile
	} from "@/apis/common.js";
	
	import {
		dataURIToBlob,
	} from "@/util";
	
	import { pathToBase64, base64ToPath } from '@/util/image-tools/index.js'

	import gmyImgCropper from '@/components/gmy-img-cropper/gmy-img-cropper.vue'
	
	export default {
		components: {
			gmyImgCropper
		},
		data() {
			return {
				userInfo: {},
				currItem: null,
				showCropper: false,
			};
		},
		onLoad() {
			const accountInfo = uni.getStorageSync('accountInfo') || {}
			this.userInfo = accountInfo.userInfo ? accountInfo.userInfo : {}
		},
		methods: {
			handleImgChoose() {
				this.$refs.gmyImgCropper.chooseImage();
			},
			async getImg(base64Img) {
				const file = await base64ToPath(base64Img)
				console.log(await pathToBase64(file))
				const accountInfo = uni.getStorageSync('accountInfo') || {}
				const data = {
					name: 'file',
					formData: {},
					fileUrl: file
				}
				console.log('getImggetImggetImg',data )
				const res = await uploadFile({
					CmpyCode: accountInfo.currCmpy ? accountInfo.currCmpy.CmpyCode : ''
				}, data)
				console.log('uploadImg', res)
				if (res.MsgCode != 0) return
				this.handleChangeLogo(res.FileName)

			},
			async handleChangeLogo(HeadImgUrl) {
				if (!HeadImgUrl) return;
				const res = await changeLogo({
					HeadImgUrl
				})
				console.log('handleChangeLogo', res)

				if (res.MsgCode != 0) return
				uni.showToast({
					title: '修改成功！',
					duration: 500,
					icon: 'success'
				});
				
				const accountInfo = uni.getStorageSync('accountInfo') || {}
				let userInfoRes = await fetchUserInfo({
					AccountId: accountInfo.accountId,
					lang: 'zh_CN'
				})
				if (userInfoRes.MsgCode != 0) return
				accountInfo.userInfo = userInfoRes
				this.userInfo = userInfoRes
				uni.setStorageSync('accountInfo', accountInfo);
			},


		},
	}
</script>

<style lang="scss">
	.userinfo {
		.top-bg {
			width: 100%;
			height: 120rpx;
			background-color: #007aff;
			z-index: -1;
		}

		.userinfo-wrap {
			margin-top: -72rpx;

			.cell-wrap {
				background-color: #fff;
				border-radius: $s-border-radius;
				box-shadow: $s-bg-shadow;
			}
		}

		.show-cropper {
			display: flex !important;
		}

		.cropper-container {

			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;

			& .cropper-wrap {
				// flex: 1;
				height: 50vh;
				width: 50vw;
			}

			& .ctrls-wrap {
				display: flex;
				color: white;
				font-size: 34rpx;
				text-align: center;
				line-height: 96rpx;
				border-bottom: 1px solid #FFF;
				height: 96rpx;

				& .ctrl {
					flex: 1;
					flex-basis: 0;
				}
			}
		}
	}
</style>
